<template>
  <div>
    <Header />
    <div class="mobile">
      <div class="head-info mt-4 mb-4">
        <div class="item-left">
          <img
            :src="detailInfo.enterpriseLogo"
            alt=""
          />
        </div>
        <div class="item-right">
          <p class="title">{{ getDictLabel('duties', detailInfo.recruitDuties) }}</p>
          <!-- <p class="people">{{ t('crew.un2') }} {{ detailInfo.recruitNumber }} {{ t('crew.un1') }}</p> -->
          <p class="location mt-2">
            {{ detailInfo.crewLocation }}
            <img
              src="@/assets/img/icon_dizhi_a.png"
              alt=""
              style="wdith: 14px; height: 28px"
            />
          </p>
        </div>
      </div>
      <div class="body">
        <div class="container">
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t6') }}</span>
            </div>
            <div class="content">
              <div class="user-info">
                <el-descriptions :column="1">
                  <el-descriptions-item :label="`${t('crew.un2') + t('crew.l19')}`">
                    {{ getDictLabel('duties', detailInfo.recruitDuties) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u1')}`">
                    {{ detailInfo.crewLocation }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u5')}`">
                    {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u13')}`">
                    {{ detailInfo.navigationArea }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.l13')}`">
                    {{ detailInfo.deadweightTon }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.recruit.l10')}`">
                    {{ dateFormat(detailInfo.yearOfConstruction, 4) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="t('crew.recruit.l11')">
                    {{ dateFormat(detailInfo.onDutyTime, 3) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u16')}`">
                    {{ detailInfo.recruitIllustrate }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Header from '../layout/Header.vue'
import Footer from '../layout/Footer.vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()
import { getRecuitDetail } from '@/service/crew'
import { dateFormat } from '@/utils'

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()

const detailInfo = ref({})
const getInfo = () => {
  getRecuitDetail(route.query.id).then((res) => {
    detailInfo.value = res.data
  })
}

onMounted(() => {
  getInfo()
  getDictData('duties')
  getDictData('ships_type')
  getDictData('sys_user_sex')
})
</script>
<style scoped lang="scss">
.mobile {
  padding-left: 27px;
}

.container {
  .doc-information {
    display: flex;
    padding-top: 40px;

    div {
      margin-right: 40px;

      img {
        width: 320px;
        height: 220px;
      }

      p {
        text-align: center;
        padding-top: 8px;
        font-size: 20px;
        font-weight: normal;
        color: #252628;
        margin-top: 24px;
      }
    }
  }
}

.head-info {
  width: 100%;
  //   height: 200px;
  //   display: flex;

  .item-left {
    width: 340px;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .item-right {
    flex: 1;
    margin-left: 15px;
    padding-top: 30px;

    .title {
      font-size: 18px;

      font-weight: bold;
      color: #252628;
      margin-bottom: 14px;
    }

    .people {
      font-size: 14px;

      font-weight: 400;
      color: #6a6973;
      line-height: 44px;
    }

    .location {
      font-size: 14px;

      font-weight: 400;
      color: #6a6973;
      line-height: 26px;
      padding-right: 24px;
      display: flex;
      justify-content: end;

      img {
        margin-left: 6px;
        margin-top: -2px;
      }
    }
  }
}

.body {
  width: 100%;
  padding-bottom: 30px;

  .title {
    font-weight: bold;
    color: #ca2a02;
    border-bottom: 2px solid black;
    // line-height: 50px;
    height: 40px;
  }

  :deep(.table_header) {
    height: 50px;
    background: #f0f3f8;
    font-size: 14px;

    font-weight: bold;
    color: #252628;
    border: rgba(235, 235, 235, 1) 1px solid;
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;

    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .name {
        width: 100%;
        display: flex;
        font-size: 14px;
        font-weight: 800;
        color: #252628;
        line-height: 22px;
        margin-bottom: 20px;

        div {
          min-width: 40px;
          height: 24px;
          background: rgba(202, 42, 2, 0.1);
          border-radius: 2px;
          margin-left: 12px;
          font-size: 12px;

          font-weight: 400;
          color: #ca2a02;
          padding: 0 8px;
        }
      }

      :deep(.el-descriptions__cell) {
        display: flex;
        justify-content: space-between;
        padding-right: 30px;
      }

      :deep(.el-descriptions__label) {
        min-width: 80px;
        text-align: left;

        font-weight: 400;
        line-height: 48px;
        display: inline-block;
        font-size: 18px;

        font-weight: 400;
        color: #6a6973 !important;
      }

      :deep(.el-descriptions__content) {
        font-size: 20px;
        font-weight: normal;
        color: #252628;
        line-height: 48px;

        span {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
